<template>
  <div class="listBox">
    <p class="title">{{title}}</p>
    <div style="height: 70%;">
      <p class="listHead flex_b">
        <span>时间</span>
        <span>预警信息</span>
      </p>
      <div class="ulBox scrollbar">
        <ul>
          <li v-for="item in list" :key="item.id" class="flex_b relative">
            <span>{{item.time}}</span>
            <span class="hiddenE" :title="item.content">{{item.content}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'WarnList',
    
    props: {
      list: {
        type: Array,
        required: true
      },
      title: {
        type: String,
        required: true
      },
    },

    data () {
      return {

      }
    },

    created(){
      
    },

    methods: {

    }
  }
</script>

<style scoped>
  .listBox{
    width: 31vw;
    color: #fff;
    border-radius: 6px;
    background: #293550;
    /* Old browsers */
    background: -moz-linear-gradient(150deg, #313c5b 0%, #23334b 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #313c5b), color-stop(100%, #23334b));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(150deg, #313c5b 0%, #23334b 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(150deg, #313c5b 0%, #23334b 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(150deg, #313c5b 0%, #23334b 100%);
    /* IE10+ */
    background: linear-gradient(150deg, #313c5b 0%, #23334b 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#313c5b, endColorstr=#23334b, GradientType=1);
    /* IE6-9 fallback on horizontal gradient */  
  }
  .title{
    height: 40px;
    margin: 10px 0 0; 
    line-height: 40px;
    text-align: center;
    font-size: 17px;
    background-color: #356482;
  }
  .ulBox{
    height: 86%;
    overflow-y: auto;
  }
  .listBox ul{
    margin: 0;
    padding: 0;
  }
  .listHead{
    margin: 10px 0;
    color: #7ecef4;
  }
  .listHead span, .listBox ul span{
    font-size: 15px;
    display: inline-block;
    text-align: center;
  }
  .listBox li{
    height: 30px;
    line-height: 30px
  }
  .listBox li::before{
    content: '';
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 20px;
    background-color: #7ecef4;
  }
  .listHead span:first-child, .listBox ul span:first-child{
    width: 40%
  }
  .listHead span:last-child, .listBox ul span:last-child{
    width: 60%
  }
</style>